<template>
  <view class="pageContent">
    <view class="member" v-if="1" @click="detailMem(index)" v-for="(item,index) in headList" :key="index">
      <view class="memberHead" v-if="index==0">
        <view class="ellipsisOne memberHeadPro">{{item.projectName}}</view>
        <view class="memberHeadAdd" v-if="1 && (item.roleId==16||item.roleId==17)" @click.stop="addMem(index)">添加成员
        </view>
      </view>
      <view class="memberMid">
        <view class="memberMidLeft">
          <image class="avatar" :src="item.portraitUrl || images +'/avatar.png'" mode="widthFix" />
          <view class="userTypeMain"><text class="userType">{{item.roleName || '角色'}}</text></view>
        </view>
        <view>
          <view class="memberMsg">
            <view class="memberName textJustify">姓名</view>
            <view class="memberNameVal">：{{item.name}}</view>
          </view>
          <view class="memberMsg">
            <view class="memberName textJustify">手机号</view>
            <view class="memberNameVal">：{{item.telephone}}</view>
          </view>
          <view class="memberMsg">
            <view class="memberName textJustify">门禁期限</view>
            <view class="memberNameVal">：{{item.expireDate || '永久有效'}}</view>
          </view>
          <!-- 1.不能修改户主 2.租客不能修改自己 -->
          <block v-if="item.roleId==16 || (userMsg.roleId==17 && item.roleId==17)">
            <view class="handlerCha "></view>
          </block>
          <block v-else>
            <view class="handlerCha handlerEpt" @click.stop="updateMem(index)">修改</view>
            <view class="handlerCha handlerBlu" @click.stop="cancleHandle(index)">关闭帐户</view>
          </block>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import config from '../../../../static/config.js'
  import util from '../../../../static/utils/util.js'
  export default {
    data() {
      return {
        images: config.images,
        localImages: config.localImages,
        headList: [],
        room: '',
        roomItem: '',
        userMsg: '',
        projectName: '湘江世纪城-一期-3栋-2004室-2008',
      }
    },
    computed: {
      ...mapState({
        // myInfo: state => state.user.myInfo
      })
    },
    onLoad() {
      console.warn('projectName.length=', this.projectName.length)
    },
    onShow() {
      var room = wx.getStorageSync('room');
      this.room = room;
      var userMsg = wx.getStorageSync('userMsg');
      this.userMsg = userMsg;
      this.roomMembers();
    },
    methods: {
      detailMem(index) {
        console.warn("===detailMem", index)
        var item = this.headList[index];
        var json = JSON.stringify(item)
        wx.navigateTo({
          url: '/pages/subMe/detailMem/main?json=' + json
        })
      },
      //修改用户
      updateMem(index) {
        this.roomItem = this.headList[index];
        var item = this.headList[index];
        var json = JSON.stringify(item)
        wx.navigateTo({
          url: '/pages/subMe/addMem/main?json=' + json
        })
      },
      cancleHandle(index) {
        this.roomItem = this.headList[index];
        this.onShowModal();
      },
      roomMembers() {
        wx.showLoading({
          title: '',
          mask: true,
          duration: 500
        })
        // var params={roomId :this.room.roomId}
        var params = {}
        util.wxRequestPro('/UserServer/owner/info/roomMembers', params)
          .then((res) => {
            console.warn('roomMembers', res)
            var param = res.param;
            this.headList = param
          }).catch((res) => {
            if (res.statusCode == 400) {
              wx.showToast({
                title: res.statusInfo,
                icon: 'none'
              })
            }
          })
      },
      onShowModal() {
        var self = this;
        wx.showModal({
          title: '用户提示',
          content: '关闭后该账户将停止一切功能使用，数据无法再恢复，是否确定要关闭吗？',
          cancelColor: "#999999",
          confirmColor: "#1086FF",
          confirmText: '关闭',
          cancelText: '取消',
          success(res) {
            if (res.confirm) {
              self.closeAccount();
            } else if (res.cancel) {

            }
          }
        })
      },
      closeAccount() {
        var room = this.roomItem;
        var params = {
          ownerId: room.ownerId,
          roomId: room.roomId,
        }
        var paramUrl = util.stringifyQs(params)
        util.wxRequestPro('/UserServer/owner/info/closeAccount?' + paramUrl, {}, 'PUT')
          .then((res) => {
            console.warn('closeAccount', res)
            wx.showToast({
              title: '关闭成功',
              icon: 'none'
            })
            this.roomMembers();
          })
      },
      //进行添加成员的操作
      addMem(index) {
        wx.showLoading({
          title: '',
          mask: true,
          duration: 800
        })
        var item = this.headList[index]
        wx.navigateTo({
          url: '/pages/subMe/addMem/main'
        })
      },
    }
  }
</script>

<style lang="stylus" scoped>
  .pageContent {
    min-height: 100vh;
    background: #F3F6F9;
    padding: 20rpx 0rpx 350rpx 0rpx;
  }

  .houseMain {
    background: #FFFFFF;
    padding: 0rpx 14rpx 0rpx 14rpx;
    margin: 0rpx 0rpx 20rpx 0rpx;
  }

  .houseTil {
    display: flex;
    justify-content: space-between;
    padding: 14rpx 14rpx 14rpx 14rpx;
    line-height: 45rpx;
    font-size: 32rpx;
    color: #030303;
    border-bottom: 0.3rpx solid #E7E7E7;
  }

  .houseNo {
    padding: 14rpx 14rpx 14rpx 14rpx;
    font-size: 30rpx;
    color: #030303;
    border-bottom: 0.3rpx solid #E7E7E7;
  }

  .houseMes {
    display: flex;
    padding: 14rpx 0rpx 14rpx 0rpx;
  }

  .houseMesIt {
    line-height: 36rpx;
    background: #F2F8FF;
    border-radius: 6rpx;
    border: 1px solid #BCDEFF;
    color: #519AEE;
    font-size: 24rpx;
    margin-right: 10rpx;
    padding: 0rpx 14rpx 0rpx 14rpx;
  }

  .handler {
    display: flex;
    justify-content: flex-end;
    padding: 14rpx 14rpx 20rpx 14rpx;
    width: 100%;
  }

  .handlerCha {
    display: inline-block;
    height: 60rpx;
    width: 160rpx;
    line-height: 60rpx;
    border-radius: 30rpx;
    color: #1086FF;
    text-align: center;
    font-weight: bold;
  }

  .handlerBlu {
    color: #FFFFFF;
    background: #1086FF;
    margin-left: 18rpx;
  }

  .handlerEpt {
    background: #FFFFFF;
    border: 1rpx solid #1086FF;
  }

  .member {
    background: #FFFFFF;
    padding: 0rpx 20rpx 0rpx 20rpx;
    margin: 0rpx 0rpx 0rpx 0rpx;
  }

  .pageContent>.member:first-child {
    padding: 34rpx 20rpx 0rpx 20rpx;
  }

  .memberHead {
    height: 40rpx;
    line-height: 40rpx;
  }

  .memberHeadPro {
    float: left;
    font-size: 36rpx;
    font-weight: 600;
    color: #333333;
    width: 560rpx;
    height: 40rpx;
  }

  .memberHeadAdd {
    float: right;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #1086FF;
  }

  .memberMid {
    background: #FFFFFF;
    display: flex;
    flex-direction: row;
    padding: 34rpx 0rpx 30rpx 0rpx;
    border-bottom: 1rpx solid #E7E7E7;
  }

  .memberMidLeft {
    width: 230rpx;
    text-align: center;
  }

  .avatar {
    width: 148rpx;
    height: 148rpx;
    border-radius: 50%;
  }

  .userTypeMain {
    padding: 10rpx 0rpx 0rpx 0rpx;
  }

  .userType {
    background: #0053FF;
    color: #fff;
    font-size: 26rpx;
    border-radius: 30rpx;
    padding: 4rpx 20rpx 4rpx 20rpx;
    margin: 0rpx 0rpx 0rpx 0rpx;
  }

  .memberMsg {
    display: flex;
    flex-direction: row;
    margin: 0rpx 0rpx 10rpx 0rpx;
    height: 36rpx;
    line-height: 36rpx;
  }

  .memberName {
    width: 116rpx;
  }
</style>
